<template>
	<view class="page">
		<view class="page_con">
			<!-- qq分享，链接上的缩略图，js动态设置失败，qq默认读取页面中的第一个图片 -->
			<view class="share——img">
				<image src="http://th.biboting.cn/static-file/badge_share.png" mode="aspectFit"></image>
			</view>
			<view class="slogen_item">
				<image src="@/static/img/login/login_slogen.png" mode="aspectFit"></image>
			</view>
			<view class="tab_section">
				<view class="">
					<image src="@/static/img/index/index_butt1.png" mode="" @click="handleScanCode"></image>
				</view>
				<view class="">
					<image src="@/static/img/index/index_butt2.png" mode="" @click="openWeb('/pages/home/index2')">
					</image>
				</view>
			</view>
			<view class="activity_desc" @click="openWeb('/pages/home/activityDesc?type=1')">
				活<br>动<br>说<br>明
			</view>
			<view class="list_section">
				<view class="list_con">
					<view class="list_title">
						我的集章册
					</view>
					<view class="lits_item">
						<view class="item" v-for="(item,index) in list" :key="index">
							<image :src="item.imgUrl" mode=""></image>
							<view>{{item.name}}</view>
						</view>
					</view>
					<view class="page_pagination">
						<page-pagination :total="total" :currentPage="form.pageNo" :pageSize="6" :showBorder="false"
							:showPageSize="6" size="small" @change="changePage"></page-pagination>
						<!-- <uni-pagination :total="50" title="标题文字" prev-text="前一页" next-text="后一页" /> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 成功弹窗 -->
		<uni-popup ref="popup1" background-color="transparent">
			<view class="popup-content1">
				<image class="img2" src="@/static/img/index/popup_image1.png" mode=""></image><br>
				<image class="img1" src="@/static/img/index/popup_image3.png" mode=""></image>
				<view class="butt_submit">
					<image src="@/static/img/exchange/close.png" mode="" @click="closePopup1"></image>
				</view>
			</view>
		</uni-popup>
		<!-- 失败弹窗 -->
		<uni-popup ref="popup2" background-color="transparent">
			<view class="popup-content2">
				<image class="img2" src="@/static/img/index/popup_image2.png" mode=""></image><br>
				<view class="resCode">
					{{msg}}
				</view>
				<view class="butt_submit">
					<image src="@/static/img/exchange/close.png" mode="" @click="closePopup2"></image>
				</view>
			</view>
		</uni-popup>

		<!-- 底部tabBar -->
		<tabbar current="1"></tabbar>
		<!-- 扫码 -->
		<view class="qr_code" v-if="showscanCode">
			<mumu-get-qrcode :definition="true" @success='qrcodeSucess' @error="qrcodeError"
				@handleCloseQr="closeQrPupop"></mumu-get-qrcode>
		</view>
	</view>
</template>

<script>
	// js
	import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
	import {
		getBadgeRecordList,
		getWechatInfo,
		setBadgeExchangeByQr
	} from '@/api/api.js'
	import tabbar from '@/components/tabBar.vue' //自定义tabBar

	export default {
		data() {
			return {
				list: [
					// 	{
					// 	url: require('@/static/img/index/tag.png'),
					// 	desc: '碧波庭美博会'
					// },
				],
				form: {
					pageNo: 1,
					pageSize: 6
				},
				total: 0,
				showscanCode: false,
				msg: '领取失败'
			}
		},
		components: {
			tabbar,
			mumuGetQrcode
		},
		onLoad() {

		},
		onShow() {
			this.form.pageNo = 1
			this.getInit() //初始化徽章数据
		},
		onHide() {},
		methods: {
			closePopup2() {
				this.$refs.popup2.close()
			},
			closePopup1() {
				this.$refs.popup1.close()
			},
			handleScanCode() {
				this.showscanCode = true
			},
			// 关闭扫码弹窗
			closeQrPupop() {
				this.showscanCode = false
			},
			// 扫码成功
			qrcodeSucess(data) {
				console.log(data)
				let result = data.split('=')[1];
				uni.showModal({
					title: "提示",
					content:result
				})
				this.showscanCode = false
				setBadgeExchangeByQr({
					badgeCode: result
				}).then(res => {
					if (res.code === 0) {
						this.$refs.popup1.open("center")
						this.form.pageNo = 1
						this.getInit()
					} else {
						this.msg = res.msg
						this.$refs.popup2.open("center")
					}
				})
			},
			// 摄像头授权失败
			qrcodeError(err) {
				// console.log(err)
				uni.showModal({
					title: '摄像头授权失败',
					content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
					// success: () => {
					// 	uni.navigateBack({})
					// }
				})
			},
			changePage(v) {
				// console.log(v)
				this.form.pageNo = v
				this.getInit()
			},
			getInit() {
				getBadgeRecordList(this.form).then(res => {
					// console.log(res)
					this.list = res.data.list
					if (this.list.length < 6) {
						// 不满一页补全

						// 不满6条数据时，补全至6条
						let defaultItem = {
							imgUrl: require('@/static/img/index/tag.png'),
							name: "敬请期待",
							hasCollect: 0,
							hasExchange: 0,
							badgeCode: null,
							exchangeTime: null
						};

						// 通过循环补全到6条数据
						while (this.list.length < 6) {
							// 深拷贝 defaultItem 以避免引用问题
							this.list.push({
								...defaultItem
							});
						}
					}
					this.total = res.data.total
				})
			},
			openWeb(v) {
				uni.navigateTo({
					url: v
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding-bottom: 120rpx;

		.share——img {
			position: absolute;
			z-index: -999;
			width: 0;
			height: 0;
		}
	}

	.page_con {
		min-height: calc(100vh - 116rpx);
		min-height: calc(100dvh - 116rpx);
		background-image: url('@/static/img/index/index_bakc.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: top center;
		position: relative;

		.slogen_item {
			text-align: center;

			image {
				margin-top: 12%;
				width: 619rpx;
				height: 260rpx;
			}
		}

		.tab_section {
			display: flex;
			justify-content: space-between;
			padding: 0 20rpx;
			margin-top: 80rpx;

			view {
				image {
					width: 341rpx;
					height: 105rpx;
				}
			}
		}

		.activity_desc {
			position: absolute;
			right: 0;
			top: 130rpx;
			background: #26292C;
			border-radius: 8rpx 0rpx 0rpx 8rpx;
			opacity: 0.61;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 12rpx;
		}

		.list_section {
			padding: 0 20rpx 100rpx;
			margin-top: 40rpx;

			.list_con {
				background: #FFFAF1;
				border-radius: 32rpx 32rpx 120rpx 120rpx;
				padding: 0 40rpx 70rpx;

				.list_title {
					width: 365rpx;
					height: 75rpx;
					line-height: 75rpx;
					background: linear-gradient(90deg, #EDD08A, #BD8229);
					border-radius: 0rpx 0rpx 32rpx 32rpx;
					font-size: 32rpx;
					color: #FFFFFF;
					margin: 0 auto;
					text-align: center;
				}

				.lits_item {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					padding: 60rpx 0rpx 30rpx;
					// min-height: 574rpx;

					.item {
						width: calc(100% / 3);
						text-align: center;
						margin-bottom: 30rpx;

						image {
							width: 168rpx;
							height: 166rpx;
						}

						view {
							font-size: 28rpx;
							color: #000000;
							overflow: hidden; //溢出隐藏
							text-overflow: ellipsis; //文本溢出显示省略号
							white-space: nowrap; //文本不会换行（单行文本溢出）d
						}
					}
				}

				.page_pagination {
					width: 80%;
					margin: 0 auto;
				}
			}
		}
	}

	.popup-content1 {
		text-align: center;

		.img1 {
			width: 220rpx;
			height: 80rpx;
			margin: 66rpx 0 0;
		}

		.img2 {
			width: 358rpx;
			height: 358rpx;
		}

		.butt_submit {
			image {
				width: 65rpx;
				height: 65rpx;
			}
		}
	}

	.popup-content2 {
		text-align: center;

		.img1 {
			width: 220rpx;
			height: 80rpx;
			margin: 66rpx 0 0;
		}

		.img2 {
			width: 288rpx;
			height: 288rpx;
		}

		.resCode {
			color: #fff;
			font-weight: bold;
			margin-top: 40rpx;
		}

		.butt_submit {
			image {
				width: 65rpx;
				height: 65rpx;
			}
		}
	}

	.butt_submit {
		text-align: center;
		margin-top: 50rpx;

		.but {
			margin: 0 auto;
			width: 350rpx;
			height: 129rpx;
			background-image: url("@/static/img/exchange/butt_back.png");
			font-size: 32rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			color: #FFFFFF;
			text-align: center;
			padding-top: 30rpx;
			font-weight: bold;

		}

		.but1 {
			background-image: url("@/static/img/index/butt_back_disabled.png");

		}
	}
</style>
